@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-flip {
        perspective: 1000px;
        transform-style: preserve-3d;
    }
    .card-inner {
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform-style: preserve-3d;
    }
    .card-front, .card-back {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .card-front {
        transform: rotateY(180deg);
    }
    .flipped .card-inner {
        transform: rotateY(180deg);
    }
    .flipped .card-back {
        opacity: 0;
    }
    .flipped .card-front {
        opacity: 1;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .bg-pattern {
        background-image: radial-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px);
        background-size: 20px 20px;
    }
    .touch-feedback {
        transition: transform 0.1s ease-in-out;
    }
    .touch-feedback:active {
        transform: scale(0.95);
    }
    .card-shadow-hover:active {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    .shine-effect {
        position: relative;
        overflow: hidden;
    }
    .shine-effect::after {
        content: '';
        position: absolute;
        top: -100%;
        left: -100%;
        width: 300%;
        height: 300%;
        background: linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        animation: shine 0.8s ease-out;
        pointer-events: none;
        z-index: 10;
    }
    @keyframes shine {
        0% {
            transform: translateX(-100%) translateY(-100%) rotate(-45deg);
        }
        100% {
            transform: translateX(100%) translateY(100%) rotate(-45deg);
        }
    }
    /* 添加额外的发光效果 */
    .glow-effect {
        animation: glow 0.5s ease-out;
    }
    @keyframes glow {
        0% {
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }
        50% {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.7);
        }
        100% {
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }
    }
    /* 多面体相关样式 */
    .perspective-1000 {
        perspective: 1000px;
    }
    .transform-style-3d {
        transform-style: preserve-3d;
    }
    .transition-transform-1000 {
        transition: transform 1s ease-in-out;
    }
    .transition-opacity-300 {
        transition: opacity 0.3s ease;
    }
}